<template>
  <div style="width:100%; ">
    <div v-bind:id="rootId">
      <div class="card">
        <div class="card-header-edit">
          <a class="card-link" data-toggle="collapse" v-bind:href="'#' + cardId" v-on:click="handleRow()">
            {{cardName}}
            <span class="float-right">
              <icon v-show="rowStatus" name="angle-up"></icon>
              <icon v-show="!rowStatus" name="angle-down"></icon>
            </span>
          </a>
        </div>
        <div v-bind:id="cardId" class="collapse show" v-bind:data-parent="'#' + rootId">
          <div class="card-body" style="padding:0px 5px 5px 5px">
            <slot name="cardBody"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'FoldCard',
  props: ['cardName'],
  data () {
    return {
      rootId: 'accordionRow' + (Math.random() * 10000).toFixed(0),
      cardId: 'collapse' + (Math.random() * 10000).toFixed(0),
      rowStatus: 1
    }
  },
  methods: {
    handleRow: function () {
      this.rowStatus = 1 - this.rowStatus;
    }
  }
}

</script>

<style scoped>
  .card-header-edit{ padding: .75rem 1.25rem; margin-bottom: 0; }
</style>
